<template>
  <div>
    <!-- gutter栅格间隔 -->
    <el-row :gutter="20">
      <!-- span栅格占据列数一共24 -->
      <el-col :span="3"
        ><div class="grid-content">
          <el-button type="info" @click="showModal">新增</el-button>
        </div></el-col
      >
      <Modal
        :visible.sync="isModalVisible"
        :postContent.sync="postContent"
        :isPut.sync="isPut"
        @post-content="confirm"
      />
      <el-col :span="8"><div class="grid-content"></div></el-col>
      <el-col :span="10"
        ><div>
          <el-input
            placeholder="请输入id"
            v-model="input"
            clearable
            @clear="handleClear"
            style="width: 100%"
          >
          </el-input></div></el-col
      ><el-col :span="2"
        ><div class="grid-content">
          <el-button type="info" @click="search">搜索</el-button>
        </div></el-col
      >
    </el-row>
    <div style="margin: 20px"></div>

    <el-table :data="displayedData" style="width: 100%">
      <el-table-column prop="id" label="id" width="80"> </el-table-column>
      <el-table-column prop="username" label="username" width="180">
      </el-table-column>
      <el-table-column prop="password" label="password"> </el-table-column>
      <el-table-column prop="name" label="name"> </el-table-column>
      <el-table-column prop="gender" label="gender"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="put(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
import Modal from "../components/EmpModal.vue";

// 创建一个Axios实例，指定基础URL
const instance = axios.create({
  baseURL: "http://localhost:8080",
});

const options = {
  components: {
    Modal,
  },
  data: function () {
    return {
      isModalVisible: false,
      isPut: false,
      flag: 1,
      input: "",
      emps: [],
      depts: [],
      searchResult: [],
      id: "",
      postContent: {
        image: "",
        username: "",
        password: "",
        name: "",
        gender: "",
        job: "",
        entrydate: "",
        deptId: "",
      },
    };
  },
  mounted() {
    this.get();
  },

  methods: {
    showModal() {
      this.isModalVisible = true;
    },
    get() {
      instance
        .get("/emps")
        .then((response) => {
          this.emps = response.data.data.rows;
        })
        .catch((error) => {
          console.error(
            "There has been a problem with your Axios operation:",
            error
          );
        });
    },
    search() {
      if (this.input) {
        const url = `/emps/${this.input}`;
        instance
          .get(url)
          .then((response) => {
            this.flag = 0;
            this.searchResult = [];
            this.searchResult.push(response.data.data);
          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        alert("未输入内容");
      }
    },
    handleClear() {
      this.flag = 1;
    },
    post() {
      if (this.postContent.name) {
        instance
          .post("/emps", this.postContent)
          .then((response) => {
            this.get();
          })
          .catch((error) => {
            console.error(
              "There has been a problem with your Axios operation:",
              error
            );
          })
          .finally(() => {
            this.postContent = {};
          });
      } else {
        alert("名字不能为空");
      }
    },
    put(index, row) {
      this.postContent.name = row.name;
      this.id = row.id;
      this.isPut = true;
      this.isModalVisible = true;
    },
    handleEdit() {
      const content = { ...this.postContent, id: this.id };
      const url = `/emps`;
      instance
        .put(url, content)
        .then((response) => {
          this.get();
        })
        .catch((error) => {
          console.error(
            "There has been a problem with your Axios operation:",
            error
          );
        })
        .finally(() => {
          this.postContent = {};
        });
    },
    handleDelete(index, row) {
      const url = `/emps/${row.id}`;
      instance
        .delete(url)
        .then((response) => {
          this.get();
        })
        .catch((error) => {
          console.error(
            "There has been a problem with your Axios operation:",
            error
          );
        });
    },
    confirm(localContent) {
      // 更新父组件的postContent对象
      this.postContent = localContent;
      if (!this.isPut) {
        this.post();
      } else {
        this.handleEdit();
        this.isPut = !this.isPut;
      }
    },
  },

  /* 计算属性,template调用时不用加括号，函数用加 */
  /* 相比方法的好处是，不改变就不会更新，有缓存 */
  computed: {
    displayedData() {
      return this.flag === 1 ? this.emps : this.searchResult;
    },
  },
};
export default options;
</script>


<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>